<template>
  <div class="polygonCutMain">
    <!-- 选项卡 -->
    <div class="options">
      <div @click="polygonCut1Show = true">网格与楼栋</div>
      <div @click="polygonCut1Show = false">人口与设施</div>
      <div @click="returnBack">返回</div>
    </div>
    <!-- 网格与楼栋 -->
    <transition name="fade">
      <div v-show="polygonCut1Show">
        <net-cut-1></net-cut-1>
      </div>
    </transition>
    <!-- 人口与设施 -->
    <div v-if="!polygonCut1Show">
      <net-cut-2></net-cut-2>
    </div>
  </div>
</template>

<script>
/*eslint-disable */
import netCut1 from "@/views/netCut/netCut1";
import netCut2 from "@/views/netCut/netCut2";
import { getCurrentInstance, onMounted } from "vue-demi";
import { useRouter } from "vue-router";
import pubsub from "pubsub-js";

export default {
  name: "netCut",
  data() {
    return {
      polygonCut1Show: true,
      poiList: [],
    };
  },
  components: {
    netCut1,
    netCut2,
  },
  setup() {
    const { proxy } = getCurrentInstance();
    const router = useRouter();
    let netName = "";
    let subList = [];

    onMounted(() => {
      subList[0] = pubsub.subscribe("polygon", (n, data) => {
        netName = data.attributes.name;
      });
      subList[1] = pubsub.subscribe("netPOI", (n, data) => {
        proxy.poiList = data;
      });
    });

    // 返回
    function returnBack() {
      // 退出至首页
      pubsub.publish("FirstPageShow", "@");
      router.push({
        path: "/main",
      });
      pubsub.publish("needCut", true);
      pubsub.publish("needReturn", netName);
      pubsub.publish("netQuit");
    }

    return { returnBack, subList };
  },
  beforeRouteLeave() {
    pubsub.publish("deleteBufferPOI", this.poiList);
    pubsub.publish("firstPageShowChange", true);
    pubsub.publish("containerShowChange", false);
  },
  beforeDestroy() {
    this.subList.forEach((element) => {
      pubsub.unsubscribe(element);
    });
  },
};
</script>

<style lang="less" scoped>
.polygonCutMain {
  position: fixed;
  bottom: 0%;
  z-index: 10000;
  height: 30%;
  width: 100%;
  > .options {
    > div {
      // display: inline-block;
      float: left;
      padding: 9px 35px;
      margin-left: 20px;
      background-image: ~"url(@{app-images-root}/button_bg8.png)";
      background-size: 100% 100%;
      color: white;
      font-size: 120%;
      font-weight: bold;
    }
  }
}
.fade-enter-active {
  transition: all 0.3s ease-out;
}
.fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.3, 1);
  transform: translateY(-30%);
}
.fade-enter-from,
.fade-leave-to {
  transition: 0.3s;
  transform: translateY(-30%);
  opacity: 0;
}
</style>